<template>
  <div class="system-settings">
    <h2 class="page-title">系统设置</h2>
    
    <el-tabs type="border-card">
      <el-tab-pane label="AI 模型管理">
        <AIModelList />
      </el-tab-pane>
      
      <el-tab-pane label="提示词模板">
        <PromptTemplateList />
      </el-tab-pane>
      
      <el-tab-pane label="基础设置">
        <div class="settings-section">
          <h3>基本配置</h3>
          <el-form label-width="180px">
            <el-form-item label="网站名称">
              <el-input v-model="settings.siteName" />
            </el-form-item>
            
            <el-form-item label="默认语言">
              <el-select v-model="settings.defaultLanguage">
                <el-option label="简体中文" value="zh-CN" />
                <el-option label="English" value="en-US" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="默认 AI 模型">
              <el-select v-model="settings.defaultAIModel" placeholder="选择默认 AI 模型">
                <el-option 
                  v-for="model in aiModels" 
                  :key="model.id" 
                  :label="model.name" 
                  :value="model.id"
                  :disabled="!model.is_active"
                />
              </el-select>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveSettings" :loading="saving">
                保存设置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import AIModelList from '../components/AIModelList.vue'
import PromptTemplateList from '../components/PromptTemplateList.vue'
import { fetchAIModels } from '../api/ai_model'
import { fetchSettings, updateSettings } from '../api/settings'

const aiModels = ref([])
const settings = ref({
  siteName: '智能写作平台',
  defaultLanguage: 'zh-CN',
  defaultAIModel: ''
})
const saving = ref(false)

const loadAIModels = async () => {
  try {
    aiModels.value = await fetchAIModels()
  } catch (error) {
    console.error('加载 AI 模型失败', error)
  }
}

const loadSettings = async () => {
  try {
    const data = await fetchSettings()
    settings.value = { ...settings.value, ...data }
  } catch (error) {
    console.error('加载设置失败', error)
  }
}

const saveSettings = async () => {
  try {
    saving.value = true
    await updateSettings(settings.value)
    ElMessage.success('设置已保存')
  } catch (error) {
    ElMessage.error('保存设置失败')
    console.error(error)
  } finally {
    saving.value = false
  }
}

onMounted(() => {
  loadAIModels()
  loadSettings()
})
</script>

<style scoped>
.system-settings {
  padding: 24px;
}

.page-title {
  margin-bottom: 24px;
}

.settings-section {
  padding: 16px;
}

.settings-section h3 {
  margin-bottom: 24px;
  font-weight: 500;
  color: #303133;
}
</style> 